<template>
  <div ref="myChart" class="o-echarts"></div>
</template>

<script>

import JSON from './henan.json';


export default {
  name: "mapEchart",
  data() {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      radioList: {
        A: '',
        B: '',
        C: '',
        D: '',
        E: ''
      },
      radioActive: 'A',
      option: {
        title: {
          text: '设备分布图',
          top: '3%',
          left: '5%',
          textStyle: {
            fontSize: 18,
            fontWeight: 300,
            color: '#b6d7ff'
          }
        },
        bmap: {
          center:"",
        },
        tooltip: {
          padding: 0,
          backgroundColor: 'transparent',
        },
        legend: {
          orient: 'vertical',
          top: '9%',
          left: '5%',
          icon: 'circle',
          data: [],
          selectedMode: 'single',
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: '#b6d7ff',
          textStyle: {
            color: '#ec808d',
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15]
          }
        },
        visualMap: {
          min: 0,
          max: 500,
          show: false,
          splitNumber: 5,
          inRange: {
            color: ['#FACD91', '#74DFB2', '#81D3F8', '#768FDE', '#e9969f'].reverse()
          },
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: '河南',
          label: {
            normal: {
              show: true,
              color: '#fff'
            },
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#8db200',
              borderColor: '#6367ad',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#feb6aa' // hover效果
            }
          },
          left: '5%',
          right: '5%',
          top: '3%',
          bottom: '18%'
        },
        series: [{
          name: '年度总项目数据查询',
          type: 'map',
          geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
          data: []
        }]
      }
    };
  },
  mounted() {

    this.echartObj = this.$echarts.init(this.$refs.myChart);
    this.$echarts.registerMap('河南', JSON);
    this.echartObj.setOption(this.getOptions(), true);
    this.echartObj.on('legendselectchanged', params => {
      this.radioActive = Object.keys(this.radioList).filter(item => this.radioList[item] === params.name)[0];
      this.echartObj.clear();
      this.echartObj.setOption(this.getOptions());
    });
    window.addEventListener('resize', () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize();
      }
    });
  },
  methods: {
    getOptions() {
      this.setOptions('legend', {
        data: Object.values(this.radioList),
        selected: (list => {
          const obj = {};
          Object.keys(list).map((item) => {
            obj[list[item]] = item === this.radioActive;
          });
          return obj;
        })(this.radioList)
      });
      this.setOptions('series', (() => {
        const arr = [];
        Object.values(this.radioList)
            .map((item) => {
              arr[this.radioList[this.radioActive] === item ? 'unshift' : 'push']({
                name: item,
                type: 'map',
                geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                data: this.getSeriesData(item)
              });
            });
        return arr;
      })());
      return this.option;
    },
    getSeriesData(item) {
      return this.radioList[this.radioActive] === item ? JSON.features.map(item => {
        return {
          name: item.properties.name,
          value: Math.ceil(Math.random() * 500),
          obj: {
            a: Math.ceil(Math.random() * 500),
            b: Math.ceil(Math.random() * 500),
            c: Math.ceil(Math.random() * 500),
            d: Math.ceil(Math.random() * 500)
          }
        };
      }) : [];
    },
    setOptions(objKey, objVal) {
      if (this.option[objKey] && typeof this.option[objKey] === 'object' && !Array.isArray(this.option[objKey])) {
        this.option[objKey] = Object.assign(this.option[objKey], objVal);
      } else {
        this.option[objKey] = objVal;
      }
      this.$set(this.option, objKey, this.option[objKey]);
    }
  }
}
</script>

<style lang="scss">
.o-echarts {
  min-width: 30px;
  min-height: 30px;
  width: 100%;
  height: 100%;
}
</style>
